[#assign title]签到[/#assign]
[#include "/common/_layout.html"/]
[#macro style]
<style></style>
[/#macro]
[#macro body]
<div class="row">
    <div class="col-6">
        您已连续签到:&nbsp;{{sigin.continuous}}天
    </div>
    <div class="col-6 text-right">
        您总共签到:{{sigin.total}}天
    </div>
</div>
<div class="row">
    <div class="col-12">
        上次签到时间:
        <span class="text-danger">
            <template v-if="sigin.total > 0">{{sigin.createdDate | formatDate}}</template>
            <template v-else>未签到</template>
        </span>
    </div>
</div>
<div class="row text-center">
    <div class="py-5 col-12">
        <button type="button" class="btn btn-lg btn-primary"
                :disabled="notSignin" @click="submitSigin">
            {{signinText}}
        </button>
    </div>
    <div class="col-12">
        <p class="text-secondary">每天可签到一次,每次签到可获得10积分</p>
    </div>
</div>
[/#macro]
[#macro script]
<script>
    var app = new Vue({
        el: '#app',
        data: {
            sigin: {
                total: 0,
                continuous: 0,
                date: 0
            }
        },
        methods: {
            refreshSigin: function () {
                var vm = this;
                axios.post('/signin/detail').then(function (response) {
                    vm.sigin = response.data || vm.sigin;
                });
            },
            submitSigin: function () {
                var vm = this;
                vm.$indicator.open({
                    text: '签到中...',
                    spinnerType: 'fading-circle'
                });
                axios.post('/signin').then(function (response) {
                    vm.$indicator.close();
                    vm.$toast(response.data.success ? '签到成功' : '签到失败');
                    if (response.data.success) {
                        vm.refreshSigin();
                    }
                }).catch(function (err) {
                    vm.$indicator.close();
                });
            }
        },
        computed: {
            notSignin: function () {
                var sysDays = new Date().format('yyyyMMdd');
                var siginDays = new Date(this.sigin.lastModifiedDate).format('yyyyMMdd');
                return sysDays == siginDays;
            },
            signinText: function () {
                return this.notSignin ? '已签到' : '签到';
            }
        },
        mounted: function () {
            var vm = this;
            vm.refreshSigin();
        }
    });
</script>
[/#macro]